<template>
	<div>
		<div style="margin-left: 30px">
			<el-button type="danger" icon="el-icon-delete" @click="del">删除</el-button>
			<el-input v-model="key" placeholder="标题" style="width: 20%;margin-right: 20px"></el-input>
			<el-button type="primary" icon="el-icon-search" v-on:click="limit_news" style="height: 40px">搜索
			</el-button>
			<el-button type="primary" style="width: 100px;height: 40px" v-on:click="empty">清空</el-button>
			<el-button type="primary" @click="dialogFormVisible_add = true"
			           style="width: 100px;height: 40px;float: right;margin-right: 30px">添加新闻
			</el-button>
		</div>
		<el-table
				ref="multipleTable"
				:data="tableData"
				tooltip-effect="dark"
				style="width: 100%;margin: 20px auto"
				height="500"
				@selection-change="handleSelectionChange">
			<el-table-column
					type="selection"
					width="55">
			</el-table-column>
			<el-table-column
					prop="title"
					label="标题"
					:show-overflow-tooltip="true"
					width="130">
			</el-table-column>
			<el-table-column
					prop="authorName"
					label="作者"
					:show-overflow-tooltip="true"
					width="150">
			</el-table-column>
			<el-table-column
					prop="url"
					label="链接"
					width="470"
					show-overflow-tooltip>
			</el-table-column>
			<el-table-column
					prop="date"
					label="发布时间"
					width="130"
					:formatter="dateFormat">
			</el-table-column>
			<el-table-column
					fixed="right"
					label="操作"
					width="200">
				<template slot-scope="scope">
					<el-button @click="dialogFormVisible = true" v-on:click="update_news(scope.row)"
					           type="primary" icon="el-icon-edit" size="small">修改
					</el-button>
					<el-button @click="delete_news(scope.row)" type="primary" icon="el-icon-delete" size="small">删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				background
				layout="prev, pager, next"
				:total="total"
				:page-size="page_size"
				:current-page="current_page"
				:hide-on-single-page="true"
				@current-change="limit_news">
		</el-pagination>
		<el-dialog title="数据更新" :visible.sync="dialogFormVisible" width="50%">
			<el-form :model="form">
				<el-form-item label="标题：" :label-width="formLabelWidth">
					<el-input v-model="form.title" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="作者：" :label-width="formLabelWidth">
					<el-input v-model="form.authorName" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="链接：" :label-width="formLabelWidth">
					<el-input v-model="form.url" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="发布时间：" :label-width="formLabelWidth">
					<el-input v-model="form.date" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false" v-on:click="update_ok">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="添加数据" :visible.sync="dialogFormVisible_add" width="50%">
			<el-form :model="form">
				<el-form-item label="标题：" :label-width="formLabelWidth">
					<el-input v-model="form_add.title" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="作者：" :label-width="formLabelWidth">
					<el-input v-model="form_add.authorName" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
				<el-form-item label="链接：" :label-width="formLabelWidth">
					<el-input v-model="form_add.url" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="新闻图片：" :label-width="formLabelWidth">
					<el-input v-model="form_add.thumbnailPicS" autocomplete="off" style="width: 550px"></el-input>
				</el-form-item>
				<el-form-item label="发布时间：" :label-width="formLabelWidth">
					<el-input v-model="form_add.date" autocomplete="off" style="width: 200px"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible_add = false" v-on:click="add_ok">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import axios, {post} from "axios";
import {data} from "autoprefixer";


export default {
	name: "NewsList",
	data() {
		return {
			tableData: [],
			key: "",
			page_size: 7,
			total: 1,
			current_page: 1,
			title: "",
			dialogTableVisible: false,
			dialogFormVisible: false,
			dialogTableVisible_add: false,
			dialogFormVisible_add: false,
			form: {
				id: 0,
				url: "",
				date: "",
				authorName: "",
				title: "",
			},
			form_add: {
				url: "",
				date: "",
				authorName: "",
				title: "",
				thumbnailPicS: ""
			},
			formLabelWidth: '120px',
			multipleSelection: []
		}
	},
	methods: {
		limit_news(val) {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/selectlimit",
					{
						"current": val,
						"size": _this.page_size,
						"key": _this.key,
					}).then(function (response) {
				_this.tableData = response.data.data;
				_this.total = response.data.total;
			})
		},
		dateFormat(row, column) {
			let date = row[column.property];
			var date1 = new Date(date);
			return date1.getFullYear() + "年" + date1.getMonth() + "月" + date1.getDate() + "日"
		},
		empty() {
			this.key = "";
			this.limit_news(1);
		},
		delete_new(id) {
			let _this = this;
			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.get("http://47.108.239.149:9000/api/deleteNews?id=" + id).then(function (response) {
					_this.limit_news(_this.current_page);
				}).catch(function (error) {
					alert("请求不可达")
				});
				_this.empty();
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		delete_news(row) {
			this.delete_new(row.id)
		},
		update_news(row) {
			this.form.id = row.id;
			this.form.title = row.title;
			this.form.url = row.url;
			this.form.authorName = row.authorName;
			var date = new Date(row.date);
			var data1 = date.getFullYear() + "年" + date.getMonth() + "月" + date.getDate() + "日"
			this.form.date = data1;
		},
		update_ok() {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/updateNews",
					{
						id: _this.form.id,
						authorName: _this.form.authorName,
						title: _this.form.title,
						url: _this.form.url,
						date: _this.form.date
					}).then(function (response) {
				if (response.data.code === "200") {
					_this.$message({
						message: '数据更新成功',
						type: 'success'
					});
					_this.limit_news(_this.current_page);
				} else {
					_this.$message.error('更新失败');
				}
			}).catch(function (response) {
				alert("请求不可达");
			})
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		del() {
			let _this = this;
			let start = true;
			// console.log(this.multipleSelection)
			for (let i in this.multipleSelection) {
				axios.get("http://47.108.239.149:9000/api/deleteNews?id=" + _this.multipleSelection[i].id).then(function (response) {
					_this.limit_news(_this.current_page);
				}).catch(function (response) {
					start = false;
				})
			}
			if (!start) {
				alert("请求不可达");
			}
			_this.empty();
		},
		add_ok() {
			let _this = this;
			axios.post("http://47.108.239.149:9000/api/installNews",
					{
						url: _this.form_add.url,
						date: _this.form_add.date,
						authorName: _this.form_add.authorName,
						title: _this.form_add.title,
						thumbnailPicS: _this.form_add.thumbnailPicS
					}
			).then(function (response) {
				if (response.data.code === "200") {
					_this.$message({
						message: '数据添加成功',
						type: 'success'
					});
					_this.empty_add();
				} else {
					_this.$message.error('添加失败');
				}
			}).catch(function (response) {
				alert("请求不可达");
			})
		},
		empty_add(){
			this.limit_news(this.current_page);
			this.form_add.url="";
			this.form_add.date="";
			this.form_add.authorName="";
			this.form_add.title="";
			this.form_add.thumbnailPicS="";
		},
		cancel(){
			this.dialogFormVisible_add = false;
			this.empty_add();
		}
	},
	mounted() {
		this.limit_news(1);
	}
}
</script>

<style scoped>
.el-pagination {
	text-align: center;
	margin-top: 20px;
}
</style>
